<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>违生纪元 - 优化版</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background: url('background.jpg') no-repeat center/cover fixed;
            position: relative;
            overflow: hidden;
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
            transition: background-image 0.8s ease-in-out;
        }

        .bg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.8s ease-in-out;
        }

        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: -2;
            transition: opacity 0.8s ease-in-out;
        }

        .character-box {
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.3s;
        }

        .dialogue-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to bottom,
                    rgba(29, 28, 28, 0.9) 20%,
                    rgba(44, 43, 43, 0.7));
            padding: 25px 40px 35px;
            min-height: 160px;
            color: #f7d1ab;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6);
            z-index: 2;
            backdrop-filter: blur(3px);
        }

        .nameplate {
            color: #e9e56e;
            font-size: 22px;
            margin-bottom: 12px;
            font-weight: 600;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
        }

        .typing-area {
            font-size: 25px;
            line-height: 1.5;
            min-height: 80px;
            position: relative;
            letter-spacing: 0.5px;
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
        }

        .cursor::after {
            content: "|";
            animation: blink 1s infinite;
            color: #f4d03f;
            position: absolute;
            margin-left: 4px;
            font-weight: 300;
        }

        .history-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            padding: 8px 15px;
            background: rgba(0, 0, 0, 0.5);
            color: #f7d1ab;
            border: 1px solid #f7d1ab;
            border-radius: 4px;
            cursor: pointer;
            z-index: 10;
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
        }

        .history-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 20;
            display: none;
            padding: 60px 40px;
            box-sizing: border-box;
            overflow-y: auto;
            color: #f7d1ab;
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
        }

        .history-content {
            max-width: 800px;
            font-size: 20px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .history-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 21;
        }

        .history-controls button {
            padding: 8px 15px;
            margin-left: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: #f7d1ab;
            border: 1px solid #f7d1ab;
            border-radius: 4px;
            cursor: pointer;
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
        }

        .history-item {
            margin-bottom: 15px;
        }

        .history-name {
            color: #e9e56e;
            font-size: 20px;
            font-weight: bold;
        }

        .history-narration {
            color: #aaa;
            font-size: 20px;
            font-style: italic;
        }

        .hidden {
            display: none !important;
        }

        .location-text {
            font-size: 24px;
            /* 更大字号 */
            font-weight: bold;
            /* 加粗字体 */
            color: #a8b9dc;
            /* 更显眼的颜色 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            /* 添加阴影以增强视觉效果 */
            margin-bottom: 15px;
            /* 添加一些间距 */
            font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
            /* 继续使用统一的字体 */
        }

        .location-english {
            font-size: 18px;
            /* 英文名字体大小 */
            color: #ffffff;
            /* 英文名颜色 */
            font-weight: normal;
            display: block;
            /* 确保英文名换行显示 */
            margin-top: 5px;
            /* 与中文名的间距 */
        }

        .character-english {
            font-size: 18px;
            /* 英文名字体大小 */
            color: #a8dadc;
            /* 英文名颜色 */
            font-weight: normal;
            margin-left: 10px;
            /* 与中文名的间距 */
        }

        .name-container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .name-chinese {
            font-size: 30px;
            color: #e9e56e;
            font-weight: 600;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
        }

        .name-english {
            font-size: 18px;
            color: #ffffff;
            font-weight: normal;
            margin-left: 10px;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="bg-image" id="current-bg"></div>
    <div class="bg-image" id="next-bg" style="opacity:0;"></div>
    <div class="bg-overlay" id="bg-overlay"></div>

    <button class="history-btn" id="historyBtn">剧情回顾</button>
    <div class="history-overlay" id="historyOverlay">
        <div class="history-controls">
            <button id="showAllBtn">查看所有剧情</button>
            <button id="returnBtn">返回</button>
        </div>
        <div class="history-content" id="historyContent"></div>
    </div>

    <img id="character" class="character-box" style="display:none;">
    <div class="dialogue-container">
        <div id="name" class="nameplate"></div>
        <div id="text" class="typing-area cursor"></div>
    </div>

    <script>
        const dialogues = [
            { text: '巴洛普克国际生态研究所', type: 'location', bg: './background/lab.png', englishName: 'Barloprak International Ecological Research Institute' },
            { text: '实验室的冷白色灯光下，安东德尔正专注地观察着培养皿中的样本。', type: 'narration' },
            { text: '突然，他的目光被实验台角落的一株鹿角蕨吸引——它的叶片边缘竟绽开了一朵亮紫色的花，花瓣细如发丝，却散发着诡异的荧光。', type: 'narration' },
            { text: '这不可能。', name: '安东德尔', type: 'character', englishName: 'Antondel' },
            { text: '他伸手触碰那朵花，指尖传来一阵细微的刺痛感，仿佛被静电击中。', type: 'narration' },
            { text: '还未等他细想，实验室的门被猛地推开。', type: 'narration' },
            { text: '安东德尔先生，全球各大地区均出现了不同表现的植物生长紊乱情况。但这不科学......我的意思是，就好像一瞬间，全球的植物都疯了！', name: '艾丽娅那', type: 'character', englishName: 'Eliana' },
            { text: '【广播】研究中心全体职员请注意，一小时后请前往会议室进行紧急会议。重复，一小时后请前往会议室进行紧急会议。', type: 'narration' },
            { text: '巴洛普克国际生态研究中心-会议室', type: 'location', bg: './background/meeting-room.png', englishName: 'Barloprak International Ecological Research Center - Meeting Room' },
            { text: '各位，我们的世界正在经历一场前所未有的生态危机。植物不再是人类认知中的模样，它们仿佛被某种力量重新编码，正在以违背自然规律的方式进化。', name: '奥列尼', type: 'character', englishName: 'Olene' },
            { text: '根据初步分析，土壤成分、气候数据均未出现显著异常。这种突变似乎并非由环境变化引起，而是源于植物自身的基因层面。', name: '马尔顿', type: 'character', englishName: 'Maldon' },
            { text: '或许是我们的调查不够深入。马尔顿先生，您的调查或许只局限于研究所附近的地域吧？', name: '艾丽娅那', type: 'character', englishName: 'Eliana' },
            { text: '距离怪象出现到现在并没有太多时间，我们小队确实没有条件研究更多地方。不过就目前的调查结果而言，植物生长紊乱的原因应该不是环境的变化，更可能出现在植物本身。', name: '马尔顿', type: 'character', englishName: 'Maldon' },
            { text: '如果不是环境问题，那么为什么世界各地都出现了相似的状况？', name: '安东德尔', type: 'character', englishName: 'Antondel' },
            { text: '奥列尼叹了口气，端起茶杯抿了一小口。', type: 'narration' },
            { text: '如果你不亲自沏茶品茶，你永远不知道茶叶的好坏。答案显然不是我们闭门造车就能找到的，我们需要派人亲自前往各个异常区域，实地调查这一切背后的原因。', name: '奥列尼', type: 'character', englishName: 'Olene' },
            { text: '安东德尔，你带领一支小队前往出现异常的区域。马尔顿，你留在研究所，负责样本分析和数据建模。', name: '奥列尼', type: 'character', englishName: 'Olene' },
            { text: '明白。', name: '安东德尔', type: 'character', englishName: 'Antondel' },
            { text: '记住，时间不多了。如果这种紊乱蔓延到农作物或生态链关键物种，后果不堪设想。', name: '奥列尼', type: 'character', englishName: 'Olene' },
            { text: '会议结束，安东德尔走出会议室，窗外阳光依旧明媚，却透着一丝不真实。他隐约感到，这场危机背后隐藏着更大的秘密……', type: 'narration' },
            { text: '巴洛普克国际生态研究所-全球生态监视实验室', type: 'location', bg: './background/lab.png', englishName: 'Barloprak International Ecological Research Center - Global Ecological Monitoring Laboratory' },
            { text: '安东德尔站在全息投影地图前，手指划过那些闪烁的红点，最终停在一片被标记为"高危"的区域——维瑟加德（Withergarde）。那里曾是著名的湿地生态区，如今却被异常生长的柳树彻底占据。', type: 'narration' },
            { text: '根据报告，维瑟加德的柳树在一周内生长速度提升了300%，树干分泌出一种黏稠的银蓝色树胶，接触后会导致哺乳动物神经麻痹。更诡异的是……这些柳树在夜间会自主调整枝条方向，像在"聆听"或"捕捉"什么。', name: '艾丽娅那', type: 'character', englishName: 'Eliana' },
            { text: '这种级别的生物电信号活动……已经超出了普通植物变异的范畴。', name: '安东德尔', type: 'character', englishName: 'Antondel' },
            { text: '窗外一道闪电划过，照亮了安东德尔实验台上那朵仍在发光的鹿角蕨花。它的紫色荧光，与报告中描述的柳树树胶颜色完全一致。', type: 'narration' },
            { text: '那我们第一站就去这里。收拾东西，我们明天就出发。', name: '安东德尔', type: 'character', englishName: 'Antondel' }
        ];

        let currentIndex = 0;
        let isTyping = false;
        let timer = null;
        const textElem = document.getElementById('text');
        const nameElem = document.getElementById('name');
        const charImg = document.getElementById('character');
        let showAllHistory = false;
        const historyBtn = document.getElementById('historyBtn');
        const historyOverlay = document.getElementById('historyOverlay');
        const historyContent = document.getElementById('historyContent');
        const showAllBtn = document.getElementById('showAllBtn');
        const returnBtn = document.getElementById('returnBtn');
        const dialogueContainer = document.querySelector('.dialogue-container');

        function changeBackground(newBg) {
            if (!newBg) return;

            const currentBg = document.getElementById('current-bg');
            const nextBg = document.getElementById('next-bg');
            const overlay = document.getElementById('bg-overlay');

            nextBg.style.backgroundImage = `url('${newBg}')`;
            overlay.style.opacity = 1;

            setTimeout(() => {
                currentBg.style.backgroundImage = `url('${newBg}')`;
                nextBg.style.opacity = 0;
                overlay.style.opacity = 0;
            }, 800);
        }

        function startDialogue() {
            if (currentIndex >= dialogues.length) return;

            const { text, type, name, bg, englishName } = dialogues[currentIndex];
            isTyping = true;

            textElem.innerHTML = '';
            nameElem.innerHTML = '';
            charImg.style.display = 'none';

            if (type === 'location' && bg) {
                changeBackground(bg);
            }

            if (type === 'character') {
                charImg.style.display = 'block';
                charImg.src = `./character/${name}.png`;

                const nameContainer = document.createElement('div');
                nameContainer.className = 'name-container';

                const nameSpan = document.createElement('span');
                nameSpan.className = 'name-chinese';
                nameSpan.textContent = name;

                const englishNameSpan = document.createElement('span');
                englishNameSpan.className = 'name-english';
                englishNameSpan.textContent = `//${englishName}`;

                nameContainer.appendChild(nameSpan);
                nameContainer.appendChild(englishNameSpan);
                nameElem.appendChild(nameContainer);
            }

            if (type === 'location') {
                textElem.classList.add('location-text');
                textElem.innerHTML = `${text}<br><span class="location-english">${englishName}</span>`;
                isTyping = false; // 地名直接显示，不需要逐字打字效果
            } else {
                textElem.classList.remove('location-text');
                let charIndex = 0;
                function typeWriter() {
                    if (charIndex < text.length) {
                        textElem.innerHTML += text[charIndex];
                        charIndex++;
                        timer = setTimeout(typeWriter, 40);
                    } else {
                        isTyping = false;
                    }
                }
                typeWriter();
            }
        }

        function handleClickOrKeyPress() {
            if (isTyping) {
                // 如果正在打字，立即显示完整句子
                clearTimeout(timer);
                textElem.innerHTML = dialogues[currentIndex].text;
                isTyping = false;
            } else {
                // 如果当前句子已显示完毕，切换到下一条对话
                currentIndex++;
                startDialogue();
            }
        }

        // 绑定鼠标点击和空格键事件
        document.addEventListener('click', handleClickOrKeyPress);
        document.addEventListener('keydown', function (event) {
            if (event.key === ' ') { // 检测是否按下了空格键
                event.preventDefault(); // 阻止默认行为
                handleClickOrKeyPress(); // 调用点击或按键的处理函数
            }
        });

        function updateHistory() {
            historyContent.innerHTML = '';
            const endIndex = showAllHistory ? dialogues.length : currentIndex + 1;

            for (let i = 0; i < endIndex; i++) {
                const { text, type, name } = dialogues[i];
                const item = document.createElement('div');
                item.className = 'history-item';

                if (type === 'character') {
                    const nameSpan = document.createElement('span');
                    nameSpan.className = 'history-name';
                    nameSpan.textContent = name + ': ';
                    item.appendChild(nameSpan);
                    item.appendChild(document.createTextNode(text));
                } else if (type === 'location') {
                    const locationSpan = document.createElement('span');
                    locationSpan.className = 'history-narration location-text';
                    locationSpan.textContent = text;
                    item.appendChild(locationSpan);
                } else {
                    const narrationSpan = document.createElement('span');
                    narrationSpan.className = 'history-narration';
                    narrationSpan.textContent = text;
                    item.appendChild(narrationSpan);
                }

                historyContent.appendChild(item);
            }
            historyContent.scrollTop = historyContent.scrollHeight;
        }

        historyBtn.addEventListener('click', function () {
            showAllHistory = false;
            updateHistory();
            historyOverlay.style.display = 'block';
            dialogueContainer.style.display = 'none';
            showAllBtn.style.display = 'inline-block';
        });

        showAllBtn.addEventListener('click', function () {
            showAllHistory = true;
            updateHistory();
            this.style.display = 'none';
        });

        returnBtn.addEventListener('click', function () {
            historyOverlay.style.display = 'none';
            dialogueContainer.style.display = 'block';
            showAllBtn.style.display = 'inline-block';
            showAllHistory = false;
        });

        startDialogue();
    </script>
</body>

</html>